import React, { Component } from 'react';
import { 
    Row, Col, List, Space, 
    Image, Button, Divider, Card, Avatar, 
    Typography
} from 'antd';
import { connect } from 'dva';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';

const { Item, Item: { Meta } } = List;
const { Paragraph } = Typography;

const IconText = ({ icon, text }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);

@connect(({ home, loading }) => ({
    home,
    loading: loading.models.home
}))
class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pageSize: 0
        }
    }
    componentDidMount() {
        // const { dispatch } = this.props;
        // dispatch({
        //     type: 'home/list',
        //     payload: 0
        // })
        this.onLoadMore(0);
    }

    onLoadMore = size => {
        const { dispatch } = this.props;
        dispatch({
            type: 'home/list',
            payload: size
        })
    }

    render() {
        const { loading, home: { listData } } = this.props;
        
        const loadMore = !loading ? (
            <div
                style={{
                    textAlign: 'center',
                    marginTop: 12,
                    height: 32,
                    lineHeight: '32px',
                }}
            >
                <Button type="link" onClick={() => this.onLoadMore(listData.length)}>加载更多...</Button>
            </div>
        ) : null;

        return (
            <Row>
                <Col span={4}></Col>
                <Col span={16}>
                    <Row gutter={16}>
                        <Col span={16}>
                            <List
                                loading={loading}
                                itemLayout="vertical"
                                size="large"
                                loadMore={loadMore}
                                dataSource={listData}
                                gutter={16}
                                
                                split
                                renderItem={item => (
                                    // <Card>
                                        <Row style={{backgroundColor:'white'}}>
                                            <Col span={4}>
                                                <Image
                                                    style={{padding: 16}}
                                                    width={138}
                                                    height={138}
                                                    src={item.avatar}
                                                    preview={false}
                                                />
                                            </Col>
                                            <Col span={20}>
                                                <Item
                                                    key={item.title}
                                                    actions={[
                                                        <Button size="small">{item.type}</Button>,
                                                        <span>{item.date}</span>,
                                                        <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                                                        <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                                                        <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />
                                                    ]}
                                                >
                                                    <Meta
                                                        style={{justifyContent: 'flex-end'}}
                                                        title={<a href={item.href}>{item.title}</a>}
                                                        description={item.description}
                                                    />
                                                    <Divider />
                                                </Item>
                                            </Col>
                                        </Row>
                                    // </Card>
                                )}
                            />
                        </Col>
                        <Col span={8}>
                            <div style={{textAlign: 'center'}}><h1>热门应用</h1></div>
                            <List
                                loading={loading}
                                itemLayout="vertical"
                                size="large"
                                loadMore={loadMore}
                                dataSource={listData}
                                gutter={16}
                                
                                split
                                renderItem={item => (
                                    <Row style={{backgroundColor:'white'}}>
                                        <Col span={6}>
                                            <Image
                                                style={{padding: 16}}
                                                width={120}
                                                height={120}
                                                src={item.avatar}
                                                preview={false}
                                            />
                                        </Col>
                                        <Col span={17}>
                                            <Item
                                                key={item.title}
                                                actions={[
                                                    <Button size="small">{item.type}</Button>,
                                                    <span>{item.date}</span>,
                                                ]}
                                            >
                                                <Meta
                                                    style={{justifyContent: 'flex-end'}}
                                                    title={<a href={item.href}>{<Paragraph ellipsis>{item.title}</Paragraph>}</a>}
                                                    description={<Paragraph ellipsis={{rows:2}}>{item.description}</Paragraph>}
                                                />
                                            </Item>
                                        </Col>
                                    </Row>
                                )}
                            />
                        </Col>
                    </Row>
                </Col>
                <Col span={4}>
                </Col>
            </Row>
        )
    }
}

export default Home;